<template>
    <view>
        <view class="cinema-top">
            <view class="tops-item" v-if="dataInfo&&dataInfo.movie_info">
                <view class="cinema-img">
                    <image :src="dataInfo.movie_info.pic"></image>
                </view>
                <view class="cinema-info">
                    <view class="top-name">{{dataInfo.movie_info.name}}</view>
                    <view class="list-tel">{{dataInfo.movie_info.publishDate}}</view>
                    <view class="list-tel">{{dataInfo.movie_info.cinemaName}}</view>
                    <view class="list-tel">{{dataInfo.movie_info.hallName}}</view>
                </view>
            </view>
        </view>

        <view class="cinema-main">
            <view class="support">
                <image :src="$imgUrl+'images/moive-no-close.png'"></image>
                <text>不支持退票</text>
                <image :src="$imgUrl+'images/moive-no-close.png'" style="margin-left: 60rpx;"></image>
                <text>不支持改签</text>
            </view>

            <view class="seat-item">
                <view class="seat-text">座位</view>
                <view class="seat-val">
                    <text v-for="(value,index) in dataInfo.showInfor" :key="index">{{value.seatName}},</text>
                </view>
            </view>
            <view class="automatic-item">
                <view>
                    <view class="aut-tops">
                        <text>自动调座</text>
                        <image :src="$imgUrl+'images/moive-yiwens.png'" @click="show = true"></image>
                    </view>
                    <view class="aut-tips">所选座位已售时，系统自动调至最佳观影座位</view>
                </view>
                <switch @change="switchchange" color="#FE602B" :checked="isChecked" style="transform:scale(0.8);margin-left: auto;" />
            </view>

            <!-- <view class="lines"></view> -->

            <!-- <view class="price-item">
                <view class="pirce-list">
                    <view class="pirce-text">市场价</view>
                    <view class="pirce-val">¥ {{dataInfo.original_price}}</view>
                </view>
                <view class="pirce-list">
                    <view class="pirce-text">积分抵扣</view>
                    <view class="pirce-vals">- ¥0</view>
                </view>
                <view class="pirce-list">
                    <view class="pirce-text" v-if="dataInfo&&dataInfo.showInfor">票价合计(共{{dataInfo.showInfor.length}}张）</view>
                    <view class="pirce-valss">¥{{dataInfo.price}}</view>
                </view>
            </view> -->
            <view class="lines"></view>
            <view class="price-item">
                <!-- <view class="pirce-list">
                    <view class="pirce-text">预计出票时间</view>
                    <view class="pirce-val">{{dataInfo.estimate_time}}</view>
                </view> -->
                <view class="order-phone-item">
                    <view style="width: 68%;">
                        <view class="pho-text">手机号码</view>
                        <view class="phone-tips">请正确填写，取票码将通过短信发送</view>
                    </view>
                    <input placeholder="请输入手机号码" class="phone-input" v-model="phone" />
                </view>
            </view>
            <view class="lines"></view>

            <view class="ticket-notice">
                <view class="not-text">
                    <text>购票须知</text>
                    <view class="agreement">
                        <view class="radio">
                            <view class="pic" @click="isCheck = !isCheck">
                                <image :src="$imgUrl+'login/select.png'" mode="" v-if="isCheck"></image>
                                <image :src="$imgUrl+'login/no.png'" mode="" v-else></image>
                            </view>
                            <!--<text> <image :src="$imgUrl+'images/moive-no-select.png'"></image> </text> -->
                            <view v-if="isCheck">同意</view>
                            <view v-else>未读</view>
                        </view>
                    </view>
                </view>
                <u-parse :html="basic.dealt"></u-parse>
            </view>

            <!-- <view class="agreement">
                <view class="radio">
                    <view class="pic" @click="isCheck = !isCheck">
                        <image :src="$imgUrl+'login/select.png'" mode="" v-if="isCheck"></image>
                        <image :src="$imgUrl+'login/no.png'" mode="" v-else></image>
                    </view>
                    <text> <image :src="$imgUrl+'images/moive-no-select.png'"></image> </text>
                    <view style="padding-bottom: 10rpx;">我已阅读并同意购票须知</view>
                </view>
            </view> -->
        </view>

        <view class="congirm-boom-nav">
            <view class="nav-lefts">
                <text class="shiji" v-if="dataInfo&&dataInfo.showInfor">票价合计(共{{dataInfo.showInfor.length}}张）</text>
                <text class="units">￥</text>
                <text class="shiji-val" v-if="dataInfo.price">{{dataInfo.price.toFixed(2)}}</text>
            </view>
            <view class="go-pay" @click="goPay">去支付</view>
        </view>

        <!-- 调座规则弹窗 -->
        <u-popup v-model="show" mode="center" border-radius="20" width="600" :closeable="true">
            <view class="rule-title">调座规则</view>
            <view class="rule-content">
                第三方服务商出票，由于出票过程存在时间差，可能存在已选座位被占情况。为了不耽误您的时间，我们将按照优先选取从（银幕中央-核心区域-边缘）的顺序为您调换座位。购买多张票将继续为您的座位保持连座。
            </view>
        </u-popup>
    </view>
</template>

<script>
import { getData, createOrder } from "@/api/movie.js"
export default {
    data() {
        return {
            show: false,
            dataInfo: {
                // price: '45',
                // original_price: '68',
                // movie_info: {
                //     posterUrl: "https://gw.alicdn.com/i1/O1CN01sSmj2b1daSm6IAUcs_!!6000000003752-0-alipicbeacon.jpg_480x480Q30s150.jpg",
                //     cast: "吴京 易烊千玺 段奕宏 张涵予 朱亚文 李晨 韩东君 耿乐 杜淳",
                //     director: "徐克",
                //     movie_name: "长津湖之水门桥",
                //     movieType: "剧情|历史|战争",
                //     time: '2022-5-14 17:42',
                //     cinemaName: '博纳电影院线·星鑫古汉店',
                //     hallName: '5号激光厅国语'
                // },
                // showInfor: [
                //         {
                //         seatName: '6排7座'
                //     },
                //     {
                //         seatName: '6排6座'
                //     }
                // ]
            },
            phone: '',
            isAccord: false,
            $imgUrl: this.$imgUrl,
            isChecked: true,
            isCheck: false,
            basic: {},

        }
    },
    onLoad(query) {
        // this.getInfo(opt.orderNo)
        if (query && query.dataList) {
            this.dataInfo = JSON.parse(decodeURIComponent(query.dataList))
            let fun = [
                getData()
            ]
            Promise.all(fun).then(res => {
                this.basic = res[0].data
                console.log(this.basic, "this.basic")
            })
        }
    },
    methods: {
        getInfo(orderNo) {
            getOrderInfo(orderNo).then(res => {
                console.log(res)
                this.dataInfo = res.data
            })
        },
        switch2Change(e) {
            console.log(e)
            this.isAccord = e.detail.value
        },
        switchchange(e) {
            // TODO H5端内置组件实现的有问题，使用v-model无效，先这样解决 
            console.log(e)
            // this.isAccord = e.detail.value
            let flag = e.detail.value;
            this.isChecked = !this.isChecked;
            if (!this.isChecked) {
                setTimeout(() => {
                    uni.showModal({
                        title: '温馨提示',
                        content: '为您节省您的购票时间，若您所选座位被占时系统自动将座位调至剩余座位中最优临近座位',
                        showCancel: true,
                        cancelColor: '#007aff',
                        confirmColor: '#FF3333',
                        cancelText: '自动调整',
                        confirmText: '不调座',
                        success: (res) => {
                            if (res.confirm) {
                                flag ? this.isChecked = true : this.isChecked = false;
                                console.log('用户点击确定');
                            } else if (res.cancel) {
                                this.isChecked = !this.isChecked;
                                console.log('用户点击取消');
                            }
                        }
                    })
                }, 100);
            }
        },
        goPay() {
            if (this.phone == '') {
                uni.showToast({
                    title: '请输入手机号码',
                    icon: 'none'
                })
                return false
            }
            let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57]|19[0-9]|16[0-9])[0-9]{8}$/;
            if (!reg.test(this.phone)) {
                uni.showToast({
                    title: '手机号码格式不正确',
                    icon: 'none'
                })
                return false
            }
            if (!this.isCheck) {
                uni.showToast({
                    title: '请阅读代购服务协议',
                    icon: 'none'
                })
                return false
            }
            console.log(this.dataInfo, this.isChecked, "this.dataInfothis.isChecked")
            let movieInfo = this.dataInfo.movie_info
            let officeInfo = this.dataInfo.officeInfo
            let json = {
                city_id: uni.getStorageSync("cityId"),
                city_name: uni.getStorageSync("citName"),
                cinema_id: this.dataInfo.cinemaId,
                cinema_name: movieInfo.cinemaName,
                cinema_address: officeInfo.address,
                cinema_latitude: officeInfo.latitude,
                cinema_longitude: officeInfo.longitude,
                cinema_phone: '',
                hall_name: movieInfo.hallName,
                plan_type: officeInfo.planType,
                film_id: movieInfo.filmId,
                film_grade: movieInfo.grade,
                film_name: movieInfo.name,
                film_duration: movieInfo.duration,
                film_publish_date: movieInfo.publishDate,
                film_director: movieInfo.director,
                film_cast: movieInfo.cast,
                film_intro: movieInfo.intro,
                film_version_types: movieInfo.versionTypes,
                film_language: movieInfo.language,
                film_types: movieInfo.filmTypes,
                film_pic: movieInfo.pic,
                film_like: movieInfo.like,
                film_show_status: movieInfo.showStatus,
                show_id: officeInfo.showId,
                show_date: officeInfo.showDate,
                show_time: officeInfo.showTime,
                stop_sell_time: officeInfo.stopSellTime,
                show_net_price: officeInfo.netPrice,
                show_version_type: officeInfo.showVersionType,
                is_seat_adjus: this.isChecked ? 2 : 1,
                mobile: this.phone,
                data_json: JSON.stringify(this.dataInfo.data_json)
            }
            createOrder(json).then(res => {
                console.log(res, "ressss")
                if (res.code == 1) {

                    let data = {
                        movieInfo: this.dataInfo.movie_info,
                        showInfor: this.dataInfo.showInfor,
                        order_info: res.data,
                        cinema_address: this.dataInfo.officeInfo.address
                    }
                    uni.navigateTo({
                        url: '/pagesB/movie/pay?dataList=' + encodeURIComponent(JSON.stringify(data))
                    })
                }
            })


        },
        goPri() {
            uni.navigateTo({
                url: '/pagesB/agreement/index'
            })
        }
    }
}
</script>

<style lang="less">
page {
}

.cinema-top {
  background-color: #636775;
  padding: 32rpx 32rpx 70rpx 32rpx;
  position: relative;

  .tops-item {
    display: flex;
    align-items: center;
    z-index: 9999;
  }

  .cinema-img {
    width: 160rpx;
    height: 222rpx;

    image {
      width: 160rpx;
      height: 222rpx;
      border-radius: 20rpx;
    }
  }

  .cinema-info {
    margin-left: 30rpx;

    .top-name {
      color: #ffffff;
      font-size: 32rpx;
      font-weight: 600;
    }

    .list-tel {
      color: #d8d8dd;
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }
}

.cinema-main {
  position: absolute;
  top: 290rpx;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  padding-bottom: 120rpx;
}

.support {
  margin: 20rpx 32rpx 0rpx 32rpx;
  background-color: #ffefee;
  border-radius: 8rpx;
  padding: 12rpx 25rpx;
  display: flex;
  align-items: center;

  image {
    width: 28rpx;
    height: 28rpx;
  }

  text {
    color: #f03d38;
    font-size: 24rpx;
    margin-left: 12rpx;
  }
}

.seat-item {
  margin: 30rpx 32rpx 9rpx 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;

  .seat-text {
    color: #636775;
  }

  .seat-val {
    color: #2d3039;
  }
}

.automatic-item {
  padding: 32rpx;
  display: flex;
  align-items: center;

  .aut-tops {
    display: flex;
    align-items: center;

    image {
      width: 28rpx;
      height: 28rpx;
      margin-left: 16rpx;
    }

    text {
      color: #636775;
      font-size: 28rpx;
    }
  }

  .aut-tips {
    margin-top: 4rpx;
    color: #fe602b;
    font-size: 24rpx;
  }
}

.lines {
  height: 20rpx;
  background-color: #f3f4f7;
}

.price-item {
  background-color: #ffffff;
  padding: 20rpx 32rpx;

  .pirce-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0rpx;
    font-size: 28rpx;

    .pirce-text {
      color: #636775;
    }

    .pirce-val {
      color: #2d3039;
    }

    .pirce-vals {
      color: #fe602b;
    }

    .pirce-valss {
      color: #fe602b;
      font-weight: 550;
    }
  }
}

.order-phone-item {
  padding: 20rpx 0rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .pho-text {
    color: #636775;
    font-size: 29rpx;
  }

  .phone-tips {
    margin-top: 4rpx;
    color: #a6a8ae;
    font-size: 24rpx;
  }

  .phone-input {
    font-size: 28rpx;
    width: 32%;
  }
}

.ticket-notice {
  padding: 40rpx 56rpx 40rpx 32rpx;
  background-color: #ffffff;

  .not-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text {
      color: #2d3039;
      font-size: 28rpx;
      font-weight: 550;
    }
    .agreement {
      .radio {
        display: flex;
        align-items: center;
        color: #2d3039;
        font-size: 24rpx;

        .pic {
          padding: 20rpx;
          image {
            width: 34rpx;
            height: 34rpx;
          }
        }
        view {
          line-height: 34rpx;
        }
        // text {
        //     margin-left: 10rpx;
        //     margin-bottom: 10rpx;
        // }
      }
    }
  }

  .not-list {
    display: flex;
    margin-top: 20rpx;
    color: #636775;
    font-size: 28rpx;

    text {
      color: #f03d38;
      font-weight: 550;
    }
  }
}

// .agreement {
//   display: flex;
//   align-items: center;
//   // justify-content: center;
//   background-color: #f2f5fa;
//   padding: 24rpx 30rpx;

//   .radio {
//     display: flex;
//     align-items: center;
//     color: #2d3039;
//     font-size: 24rpx;

//     .pic {
//       padding: 20rpx;

//       image {
//         width: 34rpx;
//         height: 34rpx;
//       }
//     }

//     // text {
//     //     margin-left: 10rpx;
//     //     margin-bottom: 10rpx;
//     // }
//   }
// }

.congirm-boom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120rpx;
  z-index: 9999;
  padding-left: 48rpx;
  padding-right: 40rpx;

  .nav-lefts {
    display: flex;
    align-items: center;

    .shiji {
      color: #636775;
      font-size: 24rpx;
      margin-top: 4rpx;
    }

    .units {
      color: #fe602b;
      font-size: 28rpx;
      font-weight: 550;
      margin-left: 18rpx;
      margin-top: 4rpx;
    }

    .shiji-val {
      color: #fe602b;
      font-size: 42rpx;
      font-weight: 550;
    }
  }

  .go-pay {
    width: 230rpx;
    height: 92rpx;
    text-align: center;
    line-height: 92rpx;
    background-color: #fe602b;
    border-radius: 46rpx;
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 600;
  }
}

.rule-title {
  text-align: center;
  padding-top: 30rpx;
  color: #292928;
  font-size: 36rpx;
  font-weight: 550;
}

.rule-content {
  padding: 35rpx 35rpx 50rpx 35rpx;
  color: #636775;
  font-size: 28rpx;
  line-height: 46rpx;
}
</style>